<template>
   <qf-table :tableData="tableData" :columns="columns" :tableLoading="tableLoading" align="center">
    <!-- 头像显示 -->
   <template v-slot:imageUrl="{row}">
        <img :src="row.imageUrl" width="100">
   </template>
        <template v-slot:action="{row}">
            <el-button type="success" @click="goPreOder(row)">
                <!-- 自定义图标 -->
                <template #icon>
                    <i class="iconfont icon-vip3"></i>
                </template>
                <!-- 自定义语法 -->
                <template #default>
                    点击充值
                </template>
            </el-button>
        </template>
   </qf-table>
</template>
<script setup>
import qfTable from '@/components/qfTable/index.vue'
import {ElMessageBox,ElMessage} from 'element-plus'
//引入请求的方法
import * as api from '@/api/pay'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
let router = useRouter()
//动态定义表头
let columns = [
    {
        label:'产品图片',
        prop:'imageUrl'
    },
    {
        label:'产品名称',
        prop:'productName'
    },
    {
        label:'产品描述',
        prop:'description'
    },
    {
        label:'价格(元)',
        prop:'price'
    },
    {
        label:'库存',
        prop:'inventory'
    },
    {
        label:'充值',
        prop:'action'
    }
]

//声明一个数据，用于注入给表格
let tableData = ref([])

//声明控制加载动画的变量
let tableLoading = ref(false)

//获取产品
let getList = async ()=>{
    tableLoading.value = true 
    try{
        let res = await api.getCategoryApi()
        console.log(res)
        tableData.value = res.data.data.reverse()
        tableLoading.value = false 
    }catch(e){
        console.log(e)
        tableLoading.value = false 
    }
}
getList()

//跳转到下单页
let goPreOder = (row)=>{
    console.log(row)
    //使用弹窗提示用户，是否购买
    ElMessageBox.confirm('您正在购买 '+row.productName+'，是否继续？','购买提示',
  {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
   .then(()=>{
     //2.用户点击了确认
     //直接获取当前产品的id,传递给下一个页面，然后跳转到预支付页面 
    router.push({path:'/preOrder',query:{product_id: row.product_id}})

   })
   .catch(()=>{
    ElMessage({
      type:'warning',
      message:'已取消购买'
    })
   })
}
</script>
<script>
export default{
    meta:{
        title: 'vipCharge',
         name: 'vip充值',
         routeName:'charge',
         icon:'icon-chongzhi'
        }
}
</script>